<template>
  <div id="body">
    <el-row>
      <el-col :span="9">模块统计</el-col>
      <el-col :span="2">
        <el-button @click="search" type="primary">查询</el-button>
      </el-col>
      <el-col :span="3">
        <el-select v-model="currentModule" clearable placeholder="全部">
          <el-option v-for="item in modules" :key="item.name" :label="item.desc" :value="item.name"></el-option>
        </el-select>
      </el-col>
      <el-col :span="3" style="margin-left: 20px">
        <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="20">
        <el-table :data="table.data" style="margin-top: 20px">
          <el-table-column label="日期" prop="dateStr"></el-table-column>
          <el-table-column label="总计" prop="total"></el-table-column>
          <el-table-column label="IP4数量" prop="ipCount"></el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { getModuleTypes, getModuleStatisticsByDay } from '../../../../api/feizns/statistics/module'
  import { getDays, toYMD } from '../../../../utils/feizns/index'

  export default {
    name: 'ModuleStatistics',
    data() {
      return {
        dateRange: [new Date() - (1000 * 60 * 60 * 24 * 10), new Date()],
        table: {
          loading: false,
          data: []
        },
        modules: [],
        currentModule: null
      }
    },
    methods: {
      search() {
        let params = {
          dates: getDays(this.dateRange[0], this.dateRange[1]),
          type: this.currentModule
        }
        this.table.data = [];
        getModuleStatisticsByDay(params).then(resp => resp.data.forEach(item => {
          item.dateStr = toYMD(item.date);
          this.table.data.push(item);
        }))
      },

      fillModules() {
        if ( this.modules.length == 0 )
          getModuleTypes().then(resp => resp.data.forEach(item => this.modules.push(item)));
      }
    },
    created() {
      this.fillModules();
      this.search();
    }
  }
</script>

<style scoped>
  #body {
    margin: 30px;
  }
</style>
